<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/test-paper1.css" rel="stylesheet">
    <link href="../css/test-success-modal.css" rel="stylesheet">

    <script src="../js/zepto-1.1.4.min.js"></script>
    
    <title>转训考试</title>
    
  </head>
  <body>
    <div class="test-paper">
        <div class="header">
            <span>多选题</span>
            <span>3/20</span>
        </div>
        <div class="container">

<!--             <div class="item">
                <div class="answer-question-item">
                    <p class="question">1、对于B+用户，以下哪些岗位适用于使用</p>
                    <div class="answer-box">
                        <div class="answer-item active">
                            <div class="check-box"></div>
                            <span class="answer-text">A、制式报表</span>
                        </div>
                        <div class="answer-item">
                            <div class="check-box"></div>
                            <span class="answer-text">B、自定义报表</span>
                        </div>
                        <div class="answer-item">
                            <div class="check-box"></div>
                            <span class="answer-text">C、明细查询</span>
                        </div>
                        <div class="answer-item">
                            <div class="check-box"></div>
                            <span class="answer-text">D、标单历史</span>
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <button class="handler-btn">上一题</button>                
                    <button class="handler-btn ml">下一题</button>
                </div>
            </div> -->

        </div>
    </div>

    <div class="mask" style="display:none;">
        
        <!-- 转训规划当天有课 -->
        <div class="mask-content">

            <div class="ok"></div>

            <div class="warpper">
                <p>恭喜您，您的考试成绩为</p>
                <h1>80</h1>
            </div>
            
            <div class="btn-wrap">
                <a class="cancel" href="javascript: ">返回首页</a>
                <a class="add-trans" href="javascript: ">查看</a>
            </div>
        </div>
    </div>
    <script src="../js/remset.js"></script>
    <script>
        //定义假如有10道题目
        var len = 10;
        var next = function(num){
            var num = num + 1;
            console.info(num);
            $('.item-'+num).show().siblings().hide();
            if(num >= len){
                $('.mask').show()
                console.info('之前的相关答题进行提交')
            }
        }

        var pre = function(num){
             var num = num >= 1? num - 1: 0;
            $('.item-'+num).show().siblings().hide();
        }

        $(function(){
            //wangjingliang
            var container = $('.container'),
                htm = '';
            //对10道题目进行编列
            for(var i = 0; i < len; i++){
                var html = '<div class="item item-'+i+'">'+
                                '<div class="answer-question-item">'+
                                    '<p class="question">'+(i+1)+'、对于B+用户，以下哪些岗位适用于使用</p>'+
                                    '<div class="answer-box">'+
                                        '<div class="answer-item active">'+
                                            '<div class="check-box"></div>'+
                                            '<span class="answer-text">A、制式报表'+(i+1)+'</span>'+
                                        '</div>'+
                                        '<div class="answer-item">'+
                                            '<div class="check-box"></div>'+
                                            '<span class="answer-text">B、自定义报表'+(i+1)+'</span>'+
                                        '</div>'+
                                        '<div class="answer-item">'+
                                            '<div class="check-box"></div>'+
                                            '<span class="answer-text">C、明细查询'+(i+1)+'</span>'+
                                        '</div>'+
                                        '<div class="answer-item">'+
                                            '<div class="check-box"></div>'+
                                            '<span class="answer-text">D、标单历史'+(i+1)+'</span>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                                '<div class="btn-box">'+
                                    '<button class="handler-btn" onclick="pre('+i+')">上一题</button>'+
                                    '<button class="handler-btn ml" onclick="next('+i+')">下一题</button>'+
                                '</div>'+
                            '</div>';
                htm = htm + html
            }
            container.html(htm);

            var answerItem = $('.answer-item')

            // 复选点击
            answerItem.click(function() {
                $(this).hasClass('active') ? $(this).removeClass('active') : $(this).addClass('active')
            })
            var itemAll = container.find('div.item');
            itemAll.eq(0).show().siblings().hide();

            $('.cancel').click(() => { 
                $('.mask').hide()
            })
        })
    </script>
  </body>
</html>